<template>
    <div>
        <t-header></t-header>
        <div class="search-wrap">
            <div class="w">
                <div class="search-item">
                    <input @keyup.enter="submitSearch" v-model="currentText" placeholder="请搜索你的内容 例如：黑人" class="search-input" type="text">
                    <i @click="submitSearch" class="iconfont search-icon">&#xe55e;</i>
                </div>
            </div> 
        </div>

        <div class="search-res">
            <a 
            @click="setCurrentCatRes(item)"
            :class="item == currentSearchCat ? 'current-res' : ''"
            :key="item" 
            v-for="item in searchCat" 
            href="javascript:;">{{item}}</a>
        </div>

        <div class="w">
            <div class="res-content">
                <span class="tips" v-if="searchDatas == ''">赶快搜索内容去吧~</span>
                <span class="tips" v-else-if="currentResData == '' || currentResData.length == 0">当前{{currentSearchCat}}内容暂无数据</span>
                <div :class="currentSearchCat == '文章' ? '' : 'clo'" class="content-list"  v-if="currentResData != '' || currentResData.length != 0">
                    <div :class="currentSearchCat == '文章' ? 'wenzhang' : ''" :key="index" v-for="(item, index) in currentResData" class="list-item">
                        <div @click="showWenzhang(item._id)"  v-if="currentSearchCat == '文章'" class="acticle-privece">{{item.title}}</div>
                        <div v-if="currentSearchCat == '视频'" class="mask-time">{{item.times}}</div>
                        <div class="mask" v-if="currentSearchCat != '文章'">
                            <div class="mask-title" v-if="currentSearchCat == '视频'">{{item.names}}</div>
                            <div class="mask-title" v-if="currentSearchCat == '图片'">{{item.albumName}}</div>
                            <div class="mask-user">
                                <img v-if="currentSearchCat == '视频'" :src="item.users.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.users.avatar}`">
                                <img v-if="currentSearchCat == '图片'" :src="item.user.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.user.avatar}`">
                                <span v-if="currentSearchCat == '视频'">{{item.users.userName}}</span>
                            </div>
                        </div>
                        <img @click="showPrivece(item)"  v-if="currentSearchCat == '视频'" v-lazy="`http://47.105.157.158:3000/images/video/${item.imgs}`">
                        <img @click="showPrivece(item)" v-if="currentSearchCat == '图片'" v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.pathName}`">
                    </div>
                </div>
            </div>
        </div>

        <!-- 预览区域 -->
        <el-dialog
            @close="closePrivece"
            :visible="videodialogVisible"
            destroy-on-close
            width="50%">
            <el-alert
                title="更多功能，请到相关分类哟"
                type="info"
                center
                show-icon>
            </el-alert>
            <video v-if="currentSearchCat == '视频'" :poster="`http://47.105.157.158:3000/images/video/${currentPriveceData.imgs}`" controls :src="`http://47.105.157.158:3000/video/${currentPriveceData.cat}/${currentPriveceData.paths}`"></video>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>

        <!-- 预览区域 -->
        <el-dialog
            @close="closePrivece"
            destroy-on-close
            :visible="imgdialogVisible"
            width="50%">
            <el-alert
                title="更多功能，请到相关分类哟"
                type="info"
                center
                show-icon>
            </el-alert>
            <img v-if="currentSearchCat == '图片'"  :src="`http://47.105.157.158:3000/images/cat/${currentPriveceData.cat}/${currentPriveceData.pathName}`" alt="">
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>

        <!-- 预览区域 -->
        <el-dialog
            @close="closePrivece"
            destroy-on-close
            :visible="acticledialogVisible"
            width="50%">
            <el-alert
                title="更多功能，请到相关分类哟"
                type="info"
                center
                show-icon>
            </el-alert>
            <span>文章</span>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>

    </div>
</template>

<script>
import Header from '../components/global/Header';
import { ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    components: {
        't-header': Header
    },
    setup (props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';
        // 搜索分类
        const searchCat = ref(['视频', '图片', '文章']);
        // 当前所处搜索分类
        const currentSearchCat = ref('视频');
        // 设置当前所在搜索分类数据
        const setCurrentCatRes = function (cat) {
            currentSearchCat.value = cat;
            if (cat == '视频' && searchDatas.value != '') {
                currentResData.value = searchDatas.value.newVideoData;
            } else if (cat == '图片' && searchDatas.value != '') {
                currentResData.value = searchDatas.value.newimgData;
            } else if (cat == '文章' && searchDatas.value != '') {
                currentResData.value = searchDatas.value.newActicleData;
            }
        }
        
        // 搜索数据
        const searchDatas = ref('');
        // 当前所处搜索分类数据
        const currentResData = ref('');
        // 当前搜索内容
        const currentText = ref('');
        // 提交搜索内容
        const submitSearch = async function () {
            if (currentText.value.trim().length == 0)
                return context.parent.$message.error('搜索内容不能为空');

             const loading = context.parent.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(async () => {
                loading.close();
                let { data: res } = await axios.post(`/search/data/${currentText.value}`);
                if (res.status != 200)
                    return context.parent.$message.error('搜索失败，请重新尝试');
                searchDatas.value = res.response;
                currentResData.value = res.response.newVideoData;
                currentSearchCat.value = '视频';
                currentText.value = '';
                }, 2000);
        }

        
        // 视频预览
        const videodialogVisible = ref(false);
        // 图片预览
        const imgdialogVisible = ref(false);
        // 文章预览
        const acticledialogVisible = ref(false);
        // 预览的数据
        const currentPriveceData = ref('');
        
        // 显示预览
        const showPrivece = function (item) {
            if (currentSearchCat.value == '视频') {
                videodialogVisible.value = true;
                imgdialogVisible.value = false;
                acticledialogVisible.value = false;
            } else if (currentSearchCat.value == '图片') {
                videodialogVisible.value = false;
                imgdialogVisible.value = true;
                acticledialogVisible.value = false;
            } else if (currentSearchCat.value == '文章') {
                videodialogVisible.value = false;
                imgdialogVisible.value = false;
                acticledialogVisible.value = true;
            }
            currentPriveceData.value = item;
        }

        // 关闭预览
        const closePrivece = function () {
            videodialogVisible.value = false;
            imgdialogVisible.value = false;
            acticledialogVisible.value = false;
        }
        
        // 显示文章详情
        const showWenzhang = function (id) {
            context.parent.$router.push(`/acticle/${id}`);
        }
        
        
        
        const methods = { setCurrentCatRes, submitSearch, showPrivece, closePrivece, showWenzhang }

        return {
            ...methods,
            searchCat,
            currentSearchCat,
            currentResData,
            currentText,
            searchDatas,
            videodialogVisible,
            imgdialogVisible,
            currentPriveceData,
            acticledialogVisible
            
        }
    }
}
</script>

<style lang="less" scoped>
.w {
    overflow: hidden;
}
.search-wrap {
    position: relative;
    height: 150px;
    line-height: 150px;
    background-color: #fff;
    text-align: center;
}

video {
    width: 100%;
    margin-top: 12px;
}

.clo {
    columns: auto 3;
    column-gap: 10px;
}

img {
    width: 100%;
}
.res-content {
    text-align: center;
    .tips {
        display: inline-block;
        margin-top: 60px;
        font-size: 30px;
        color: #595959;
        font-weight: 700;
    }
    .content-list {
        margin-top: 50px;
        .list-item {
            position: relative;
            break-inside: avoid;
            cursor: pointer;
            &:hover .mask {
                display: block;
            }
            .mask {
                display: none;
                .mask-title {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 18px;
                    color: #fff;
                }
            }
            img {
                width: 100%;
            }
            .mask-user {
                position:absolute;
                bottom: 10px;
                left: 10px;
                img {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    vertical-align: middle;
                    margin-right: 12px;
                }
                span {
                    color: #fff;
                    font-size: 14px;
                    font-weight: 700;
                }
            }
        }
    }
}

.mask-time {
    position: absolute;
    right: 10px;
    top: 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 2px;
    color: #fff;
    padding: 0 12px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 4);
    font-weight: 700;
}

.wenzhang {
    margin: 12px 0;
}

.search-res {
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eaebec;
    a {
        display: inline-block;
        padding-bottom: 10px;
        font-size: 14px;
        font-weight: 700;
        margin: 0 12px;
        color: #595959;
        &:hover {
            color: #1a8eed;
        }
    }
}

.acticle-privece {
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 22px;
    font-weight: 700;
    color: #999;
    background-color: #fff;
}



.current-res {
    border-bottom: 2px solid #1a8eed!important;
    color: #000!important;
}


.search-input {
    width: 100%;
    border-radius: 20px;
    height: 40px;
    outline: 0;
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    padding: 0 12px;

}

.search-item {
    width: 400px;
    margin: 0 auto;
    position: relative;
    .search-icon {
        position: absolute;
        right: 20px;
        top: 0;
        font-size: 22px;
        color: #9fa3a6;
        font-weight: 700;
        cursor: pointer;
    }
}
</style>